import * as Nerv from 'nervjs'
import classnames from 'classnames'
import { Link, NavLink, withRouter } from 'react-router-dom'
import { Modal } from '../../../src'
import './style.scss'

interface HeaderProps {
  collapse: boolean
}

class HeaderS extends Nerv.Component<HeaderProps, any> {
  constructor (...args) {
    super(...args)
    this.state = {
      toggle: true
    }
  }
  toggleMenu = () => {
    const _toggle = this.state.toggle
    this.setState({
      toggle: !_toggle
    })
  }
  goToGuide (e) {
    e.preventDefault()
    Modal.confirm({
      title: '提示',
      content: '即将跳转到AT-UI原版文档（vue），是否跳转'
    }).then(() => {
      window.location.href = 'https://at-ui.github.io/at-ui/#/zh/guide/color'
    })
  }
  goToSource (e) {
    e.preventDefault()
    Modal.confirm({
      title: '提示',
      content: '即将跳转到AT-UI原版文档（vue），是否跳转'
    }).then(() => {
      window.location.href =
        'https://at-ui.github.io/at-ui/#/zh/resource/design'
    })
  }
  render () {
    const { collapse } = this.props
    const { toggle } = this.state
    return (
      <header
        className={classnames('page-header', { collapse })}
        id='J-page-header'
      >
        <div className='nav-container'>
          <div className='nav-left'>
            <div className='logo'>
              <Link to='/'>
                <img
                  className='logo-img'
                  src=''
                />
                <span>AT UIKIT</span>
              </Link>
            </div>
            <i className='icon icon-menu nav-icon' onClick={this.toggleMenu} />
          </div>
          <div
            className='nav-right'
            style={{ height: toggle ? '0px' : 'auto' }}
          >
            <ul className='navbar'>
              <li>
                <a
                  onClick={this.goToGuide}
                  href='https://at-ui.github.io/at-ui/#/zh/guide/color'
                  target='_blank'
                >
                  指南
                </a>
              </li>
              <li>
                <NavLink activeClassName='router-link-active' to='/docs'>
                  组件
                </NavLink>
              </li>
              <li>
                <a
                  onClick={this.goToSource}
                  href='https://at-ui.github.io/at-ui/#/zh/resource/design'
                  target='_blank'
                >
                  资源
                </a>
              </li>
            </ul>
          </div>
        </div>
      </header>
    )
  }
}

export default withRouter(HeaderS)
